<script setup>
import { ref, watch } from 'vue'
import { getEmployeeByIdService } from '@/api/employee.js'

const props = defineProps({
  employeeId: {
    type: Number,
    required: true
  }
})

// 员工职位、用户状态与el-tag类型映射
const employeePositionTagTypeMap = {
  服务员: 'info',
  采购员: 'primary',
  收银员: 'warning',
  店长: 'danger'
}
const userStatusTagTypeMap = {
  启用: 'success',
  禁用: 'danger'
}
const getEmployeePositionTagType = (position) => {
  return employeePositionTagTypeMap[position] || 'info'
}
const getUserStatusTagType = (status) => {
  return userStatusTagTypeMap[status] || 'info'
}

// 获取员工信息
const employeeInfo = ref({})
const getEmployeeById = async (id) => {
  const res = await getEmployeeByIdService(id)
  employeeInfo.value = res.data.data
}

// 监听 employeeId 的变化，当 employeeId 变化时重新获取员工信息
watch(
  () => props.employeeId,
  (newId) => {
    if (newId) {
      getEmployeeById(newId)
    }
  },
  { immediate: true }
)
</script>

<template>
  <el-form :model="employeeInfo" label-position="left">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="员工ID">
          <el-tag type="info">{{ employeeInfo.id }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="姓名">
          <el-tag type="info">{{ employeeInfo.name }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="性别">
          <el-tag type="info">{{ employeeInfo.gender ?? '---' }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="年龄">
          <el-tag type="info">{{ employeeInfo.age ?? '---' }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="移动电话">
          <el-tag type="info">{{ employeeInfo.mobilePhone }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="身份证号码">
          <el-tag type="info">{{ employeeInfo.idNumber }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="电子邮箱">
          <el-tag type="info">{{ employeeInfo.email ?? '---' }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="地址">
          <el-tag type="info">{{ employeeInfo.address ?? '---' }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="职位">
          <el-tag :type="getEmployeePositionTagType(employeeInfo.position)">{{
            employeeInfo.position
          }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="每月薪资">
          <el-tag type="info">{{ (employeeInfo.salary / 100).toFixed(2) }}元</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="员工技能">
          <el-tag type="info">{{ employeeInfo.skills ?? '---' }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="用户状态">
          <el-tag :type="getUserStatusTagType(employeeInfo.status)">{{
            employeeInfo.status
          }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="创建时间">
          <el-tag type="info">{{ employeeInfo.createTime }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="更新时间">
          <el-tag type="info">{{ employeeInfo.updateTime }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
